import React, { Component } from 'react';
import axios from 'axios';
import cookie from 'react-cookies';
import {rsaEncode} from '../comm/rsa';

class Login extends Component {
    state = {
        username: "",
        password: "",
        hiddenPwd: true,
        loginWait: "",
    }
    handleChange = (e) => {
        this.setState({
            [e.target.id]: e.target.value,
        })
    }
    handleReset = () => {
        this.setState({
            username: "",
            password: "",
        })
    }
    onKeyDownChange = (e) => {
        if (13 === e.keyCode) {
            this.handleSubmit()
        }
    }
    handleEye = () => {
        let hiddenPwd = this.state.hiddenPwd;
        hiddenPwd = !hiddenPwd;
        this.setState({
            hiddenPwd: hiddenPwd,
        })
    }
    handleSubmit = () => {
        if(this.state.username === null || this.state.username === '') {
            alert("用户名不能为空！");
            return;
        }
        if(this.state.password ===null || this.state.password === '') {
            alert("密码不能为空！");
            return;
        }
        axios.post("/app/getPubKey", {
            "userName": this.state.username
        }).then((res) => {
            let pubKey = "";
            if(res.data.errorInfo === "") {
                pubKey = res.data.pubKey;
                for(var i = 0; i < 3; i++) {
                    if(pubKey === "") {
                        this.timer = setTimeout(() => {
                                console.log("[getPubKey]: " + pubKey);
                            }, 1000);
                        this.setState({
                            loginWait: i,
                        })
                    }
                }
                if(pubKey === "") {
                    alert("[getPubKey]获取失败: " + pubKey);
                    return;
                }
                let cipherPwd = rsaEncode(this.state.password, pubKey);
                axios.post("/app/login", {
                    "userName": this.state.username,
                    "password": cipherPwd,
                }).then((res) => {
                    if(res.data.loginStatus === true) {
                        cookie.save('login-name', res.data.userName, {path: '/', maxAge: 1800});
                        cookie.save('login-id', res.data.loginID, {path: '/', maxAge: 1800});
                        this.props.history.push('/main');
                    } else {
                        alert("异常信息: " + res.data.errorInfo);
                        console.log(res);
                    }
                }).catch((err) => {
                    alert("axios请示异常: " + err);
                })
            } else {
                alert("异常信息: " + res.data.errorInfo);
                console.log(res);
            }
        }).catch((err) => {
            alert("axios请示异常: " + err);
        })
    }
    componentWillUnmount() {
        this.timer && clearTimeout(this.timer);
    }
    render() {
        let eyeImg = this.state.hiddenPwd ? "openEye" : "closeEye";
        let hiddenPwd = this.state.hiddenPwd ? "password" : "text";
        return (
            <div align = "center">
                <br/><br/><br/><br/>
                <div>登录</div><br/><br/>
                <div>
                    <table>
                    <tbody>
                    <tr>
                        <td>用户：</td>
                        <td><input type='text' id='username' size='20' onChange={this.handleChange}
                        value={this.state.username}/></td>
                        <td>{this.state.loginWait}</td>
                    </tr>
                    <tr>
                        <td>密码：</td>
                        <td><input
                        type={hiddenPwd}
                        id='password' size='20'
                        value={this.state.password}
                        onChange={this.handleChange}
                        onKeyDown={this.onKeyDownChange}/></td>
                        <td><img onClick={this.handleEye} 
                            src={require('../../img/' + eyeImg + '.png')} 
                            alt={eyeImg} heigt='20' width='20' /></td>
                    </tr>
                    </tbody>
                    </table>
                </div>
                <br/>
                <table>
                <tbody>
                    <tr>
                        <td><button onClick={this.handleSubmit}>登录</button></td>
                        <td width='10'></td>
                        <td><button onClick={this.handleReset}>重填</button></td>
                    </tr>
                </tbody>
                </table>
            </div>
        )
    }
}

export default Login;
